<template>
	<view class="content">
		<view class="list-block">
			<view v-for="(item,index) in position" :key="item.id" @click="checkItem(item.id)" class="list-item">
				<checkbox-group>
					<checkbox :checked="checkPosition.includes(item.id)" color="#0256FF" class="checkbox"></checkbox>
				</checkbox-group>
				<view class="info-block">
					<view class="title">{{item.jobTitle}}</view>
					<view class="address">{{item.jobAddress}}</view>
					<view class="label-block">
						<view v-for="(item1,index1) in item.welfare" :key="index1" class="label-item">{{item1}}</view>
					</view>
					<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}<text
							class="unit">元</text></view>
					<view class="wage" v-else>面议</view>
				</view>
			</view>
		</view>
		<view class="btn-block">
			<checkbox-group>
				<checkbox color="#0256FF" :checked="isAll" @click="checkAll" id="checkAll">
					<label for="checkAll">全选</label>
				</checkbox>
			</checkbox-group>
			<view @click="handleSave" class="btn">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js'
	import {
		multipleChoiceChange
	} from '@/util/util.js'
	import {
		getEnterprisePubById
	} from '@/api/live.js';
	export default {
		data() {
			return {
				checkPosition: [],
				position: [],
				id: null,
				isAll: false
			}
		},
		watch: {
			checkPosition: {
				handler() {
					this.isAll = this.position.length == this.checkPosition.length
				},
				immediate: true
			},
			position: {
				handler() {
					this.isAll = this.position.length == this.checkPosition.length
				},
				immediate: true
			}
		},
		methods: {
			handleSave() {
				let storage = getStorage('positionData');
				storage = storage ? storage : {};
				storage[this.id] = this.checkPosition;
				if (storage[this.id].length == 0) {
					delete storage[this.id]
				}
				setStorage('positionData', storage);
				uni.navigateBack();
			},
			checkItem(id) {
				this.checkPosition = multipleChoiceChange(this.checkPosition, id);
			},
			checkAll() {
				const length = this.checkPosition.length;
				this.checkPosition = [];
				if (length != this.position.length) {
					for (let i = 0; i < this.position.length; i++) {
						this.checkPosition.push(this.position[i].id)
					}
				}
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterprisePubById({
					comId: this.id
				}).then((res) => {
					uni.hideLoading();
					this.position = res;
				}).catch((res) => {
					uni.hideLoading();
					this.showToast('加载失败，请重试');
				})
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getList()
			this.imageUrl = this.globalConfig.imageUrl;
			let storage = getStorage('positionData');
			storage = storage ? storage : {};
			this.checkPosition = storage[this.id] ? storage[this.id] : [];
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #FAFAFA;
	}

	.content {
		.list-block {
			padding-bottom: 130rpx;

			.list-item {
				display: flex;
				flex-direction: row;
				padding: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.checkbox {
					margin-right: 30rpx;
				}

				.info-block {
					width: calc(100% - 90rpx);
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.address {
						font-size: 28rpx;
						color: #999;
						margin-top: 16rpx;
					}

					.title,
					.address,
					.wage {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 16rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}

					.wage {
						color: #0256FF;
						font-size: 36rpx;
						font-weight: bold;
						display: flex;
						flex-direction: row;
						align-items: center;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}
		}

		.btn-block {
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 130rpx;
			width: 100%;
			padding: 0 30rpx;
			box-shadow: 0px -1px 10px 0 #efefef;

			.btn {
				flex-grow: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #0256FF;
				border-radius: 40rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
			}

			#checkAll {
				flex-grow: 0;
				margin-left: 40rpx;
			}

			label {
				margin: 0 20rpx;
			}

		}
	}
</style>